window.onload = function () {
    var container = document.querySelector("#container");
    var canvas = document.createElement("canvas");
    canvas.width = container.clientHeight;
    canvas.height = container.clientHeight;
    container.appendChild(canvas);
    var gl = canvas.getContext("webgl");
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    
    function draw(gl,points,radian) {
        var VERTEX_SHADER_SOURCE =
            "attribute vec4 a_Position;\n" +
            "uniform float u_CosB, u_SinB;\n" +
            "void main(){\n" +
            "gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n" +
            "gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n" +
            "gl_Position.z = a_Position.z;\n"+
            "gl_Position.w = 1.0;\n"+
            "}\n";
        var FRAGMENT_SHADER_SOURCE =
            "void main(){\n" +
            "gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n" +
            "}\n";
        var vertex_shader_obj = gl.createShader(gl.VERTEX_SHADER);
        var fragment_shader_obj = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(vertex_shader_obj, VERTEX_SHADER_SOURCE);
        gl.shaderSource(fragment_shader_obj, FRAGMENT_SHADER_SOURCE);
        gl.compileShader(vertex_shader_obj);
        gl.compileShader(fragment_shader_obj);
        var program = gl.createProgram();
        gl.attachShader(program, vertex_shader_obj);
        gl.attachShader(program, fragment_shader_obj);
        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw gl.getProgramInfoLog(program);
        };
        gl.useProgram(program);
        // cosB
        var u_CosB = gl.getUniformLocation(program, "u_CosB");
        gl.uniform1f(u_CosB, Math.cos(radian))
        // sinB
        var u_SinB = gl.getUniformLocation(program, "u_SinB");
        gl.uniform1f(u_SinB, Math.sin(radian))
        // points
        var vertices = new Float32Array(points);
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
        //draw
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
        return radian;
    };
    
    canvas.style.cursor = "pointer";
    var currentRadian = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],Math.PI/180.0 *0.0);
    var finalRadian;
    
    canvas.onmousedown = function(e){
        if(e.buttons == 4){
            var startX = e.offsetX;
            var startY = e.offsetY;
            canvas.onmousemove = function (me) {
                if(me.buttons == 4){
                    var endX = me.offsetX;
                    var endY = me.offsetY;
                    var dX = (endX - startX);
                    var dY = (endY - startY);
                    var d = Math.abs(dX)>Math.abs(dY)?dX:dY;
                    var radian = (d / canvas.width)*0.1;
                    var cumulativeRadian = radian + currentRadian;
                    finalRadian = draw(gl,[0.0,0.0,0.5,-0.5,0.5,0.5],cumulativeRadian);
                    currentRadian = finalRadian;
                };
            };
        }
    };
    
    canvas.onmouseup = function () {
        canvas.onmousemove = null;
    };  
}